<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="com.greenleaf.entity.*" %>
<!DOCTYPE html>
<html lang="en">
 <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png"/>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/chosen.min.css">
    <link rel="stylesheet" href="css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="css/magnific-popup.min.css">
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="css/mobile-menu.css">
    <link rel="stylesheet" href="fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="css/style.css">
<head>
    <title>Details Fullwith</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
</head>
<body class="details-page">

<!-- 引入头部导航栏 -->
	<jsp:include page="top.jsp"></jsp:include>
<div>
<%
String value="product"+request.getParameter("pdtId");

Product product=(Product)session.getAttribute(value); 
%>
</div>
<div class="main-content main-content-details single no-sidebar">

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-trail breadcrumbs">
                    <ul class="trail-items breadcrumb">
                        <li class="trail-item trail-begin">
                            <a href="index.jsp">首页</a>
                        </li>
                        <li class="trail-item">
                            <a href="#"><%out.print(product.getPdtClass().getClassName());%></a>
                        </li>
                        <li class="trail-item trail-end active" id="pdtName"><%out.print(product.getPdtName());%></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="content-area content-details full-width col-lg-9 col-md-8 col-sm-12 col-xs-12">
                <div class="site-main">
                    <div class="details-product">
                        <div class="details-thumd" id="productImg" >
                            	<img id="img_zoom" src="<%out.print(product.getPdtImg());%>"  alt="img">
                            	
                            	 <div class="product-preview image-small product_preview">
                            	 <br/>
                            	 <div id="thumbnails" class="thumbnails_carousel owl-carousel" data-nav="true" data-autoplay="false" data-dots="false" data-loop="false" data-margin="10" data-responsive='{"0":{"items":3},"480":{"items":3},"600":{"items":3},"1000":{"items":3}}'>
                            	   <img src="<%out.print(product.getPdtImg());%>"  alt="img"> 
                            	   <img src="<%out.print(product.getPdtImg());%>"  alt="img">
                            	   <img src="<%out.print(product.getPdtImg());%>"  alt="img"> 
                            	   <img src="<%out.print(product.getPdtImg());%>"  alt="img">
                            	 </div>
                            	      </div>
                        </div>
                        <div class="details-infor">
                            <h1 class="product-title" >
                  			<%out.print(product.getPdtName());%>
                            </h1>
                            <div class="stars-rating">
                                <div class="star-rating">
                                    <span class="star-<%out.print(product.getDiscount());%>"></span>
                                </div>
                                <div class="count-star">
                                   <%out.print(product.getDiscount());%>
                                </div>
                            </div>
                            <div class="availability">
                                                                                    供货:
                                <a href="#">有现货</a>
                            </div>
                            <div class="price">
                       		        ￥ <span id="unit"> <%out.print(product.getPrice());%></span>
                            </div>
                            <div class="product-details-description">
                                <ul>
                                    <li><%out.print(product.getPdtClass().getClassName());%></li>
                                </ul>
                            </div>
                            <div class="variations">
                                <div class="attribute attribute_size">
                                    <div class="size-text text-attribute">
                                                                                                          大小：
                                    </div>
                                    <div class="list-size list-item">
                                        <a onclick="sizeId(1)" id="size1" >一月龄</a>
                                        <a onclick="sizeId(2)" id="size2" >二月龄</a>
                                        <a onclick="sizeId(3)" id="size3" >三月龄</a>
                                        <a onclick="sizeId(4)" id="size4" >四月龄</a>
                                        <a onclick="sizeId(5)" id="size5" >五月龄</a>
                                        <a onclick="sizeId(6)" id="size6" >六月龄</a>
                                    </div>
                                </div>
                            </div>
                            <div class="group-button">
                                <div class="yith-wcwl-add-to-wishlist">
                                    <div class="yith-wcwl-add-button">
                                        <a href="#">添加至心愿单</a>
                                    </div>
                                </div>
                                <div class="quantity-add-to-cart">
                                    <div class="quantity">
                                        <div class="control">
                                            <a class="btn-number qtyminus quantity-minus" href="#">-</a>
                                            <input type="text" step="1" min="1" max="9" value="1" title="Qty"
                                                   class="input-qty qty" size="4" id="number">
                                            <a href="#" class="btn-number qtyplus quantity-plus">+</a>
                                        </div>
                                    </div>
                                    <button class="single_add_to_cart_button button" onclick="addProCate()" >添加到我的购物车</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-details-product">
                        <ul class="tab-link">
                            <li class="active">
                                <a data-toggle="tab" aria-expanded="true" href="#product-descriptions">描述 </a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" aria-expanded="true" href="#information">信息 </a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" aria-expanded="true" href="#reviews">评论</a>
                            </li>
                        </ul>
                        <div class="tab-container">
                            <div id="product-descriptions" class="tab-panel active">
                                <p>
                                  (待定)                                                                                                 
                                </p>
                            </div>
                            <div id="information" class="tab-panel">
                                <table class="table table-bordered">
                                    <tr>
                                        <td>大小</td>
                                        <td> XS / S / M / L</td>
                                    </tr>
                                    <tr>
                                        <td>颜色</td>
                                        <td>白色/黑色/蓝绿色/棕色</td>
                                    </tr>
                                    <tr>
                                        <td>性能</td>
                                        <td>彩色连衣裙</td>
                                    </tr>
                                </table>
                            </div>
                            <div id="reviews" class="tab-panel">
                                <div class="reviews-tab">
                                    <div class="comments">
                                        <h2 class="reviews-title">
                                                                                                                          一条评论关于
                                            <span>槟榔棕榈</span>
                                        </h2>
                                        <ol class="commentlist">
                                            <li class="conment">
                                                <div class="conment-container">
                                                    <a href="#" class="avatar">
                                                        <img src="images/avartar.jpeg.jpg" alt="img">
                                                    </a>
                                                    <div class="comment-text">
                                                        <div class="stars-rating">
                                                            <div class="star-rating">
                                                                <span class="star-5"></span>
                                                            </div>
                                                            <div class="count-star">
                                                                (1)
                                                            </div>
                                                        </div>
                                                        <p class="meta">
                                                            <strong class="author">Cobus Bester</strong>
                                                            <span>-</span>
                                                            <span class="time">June 7, 2013</span>
                                                        </p>
                                                        <div class="description">
                                                            <p>简单有效的设计。我的最爱之一。</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ol>
                                    </div>
                                    <div class="review_form_wrapper">
                                        <div class="review_form">
                                            <div class="comment-respond">
                                                <span class="comment-reply-title">添加评论 </span>
                                                <form class="comment-form-review">
                                                    <p class="comment-notes">
                                                        <span class="email-notes">您的电子邮件地址将不会被公开。</span>
                                                                                                                                                           必填字段已标记
                                                        <span class="required">*</span>
                                                    </p>
                                                    <div class="comment-form-rating">
                                                        <label>您的评级</label>
                                                        <p class="stars">
                                        						<span>
                                        							<a class="star-1" href="#"></a>
                                        							<a class="star-2" href="#"></a>
                                        							<a class="star-3" href="#"></a>
                                        							<a class="star-4" href="#"></a>
                                        							<a class="star-5" href="#"></a>
                                        						</span>
                                                        </p>
                                                    </div>
                                                    <p class="comment-form-comment">
                                                         <label>
                                                                                                                                                                  您的评论
                                                            <span class="required">*</span>
                                                        </label>
                                                        <textarea title="review" id="comment" name="comment" cols="45"
                                                                  rows="8"></textarea>
                                                    </p>
                                                    <p class="comment-form-author">
                                                        <label>
                                                                                                                                                                                姓名
                                                            <span class="">*</span>
                                                        </label>
                                                        <input title="author" id="author" name="author" type="text"
                                                               value="">
                                                    </p>
                                                    <p class="comment-form-email">
                                                        <label>
                                                                                                                                                                  电子邮箱
                                                            <span class="">*</span>
                                                        </label>
                                                        <input title="email" id="email" name="email" type="email"
                                                               value="">
                                                    </p>
                                                    <p class="form-submit">
                                                        <input name="submit" type="submit" id="submit" class="submit"
                                                               value="提交">
                                                    </p>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="clear: left;"></div>
                    <div class="related products product-grid">
                        <h2 class="product-grid-title">您可能还喜欢</h2>
                        <div class="owl-products owl-slick equal-container nav-center"  data-slick ='{"autoplay":false, "autoplaySpeed":1000, "arrows":true, "dots":false, "infinite":true, "speed":800, "rows":1}' data-responsive='[{"breakpoint":"2000","settings":{"slidesToShow":3}},{"breakpoint":"1200","settings":{"slidesToShow":2}},{"breakpoint":"992","settings":{"slidesToShow":2}},{"breakpoint":"480","settings":{"slidesToShow":1}}]'>
                            <div class="product-item style-1">
                                <div class="product-inner equal-element">
                                    <div class="product-top">
                                        <div class="flash">
													<span class="onnew">
														<span class="text">
															新品上市
														</span>
													</span>
                                        </div>
                                    </div>
                                    <div class="product-thumb">
                                        <div class="thumb-inner">
                                            <a href="#">
                                                <img src="images/product-item-1.jpg" alt="img">
                                            </a>
                                            <div class="thumb-group">
                                                <div class="yith-wcwl-add-to-wishlist">
                                                    <div class="yith-wcwl-add-button">
                                                        <a href="#">添加到心愿单</a>
                                                    </div>
                                                </div>
                                                <a href="#" class="button quick-wiew-button">查看详情</a>
                                                <div class="loop-form-add-to-cart">
                                                    <button class="single_add_to_cart_button button">添加到购物车
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-info">
                                        <h5 class="product-name product_title">
                                            <a href="#">铝合金</a>
                                        </h5>
                                        <div class="group-info">
                                            <div class="stars-rating">
                                                <div class="star-rating">
                                                    <span class="star-3"></span>
                                                </div>
                                                <div class="count-star">
                                                    (3)
                                                </div>
                                            </div>
                                            <div class="price">
                                                <del>
                                                    $65
                                                </del>
                                                <ins>
                                                    $45
                                                </ins>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-item style-1">
                                <div class="product-inner equal-element">
                                    <div class="product-top">
                                        <div class="flash">
													<span class="onnew">
														<span class="text">
															新品上市
														</span>
													</span>
                                        </div>
                                    </div>
                                    <div class="product-thumb">
                                        <div class="thumb-inner">
                                            <a href="#">
                                                <img src="images/product-item-2.jpg" alt="img">
                                            </a>
                                            <div class="thumb-group">
                                                <div class="yith-wcwl-add-to-wishlist">
                                                    <div class="yith-wcwl-add-button">
                                                        <a href="#">添加到心愿单</a>
                                                    </div>
                                                </div>
                                                <a href="#" class="button quick-wiew-button">查看详情</a>
                                                <div class="loop-form-add-to-cart">
                                                    <button class="single_add_to_cart_button button">添加到购物车
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-info">
                                        <h5 class="product-name product_title">
                                            <a href="#">槟榔棕榈</a>
                                        </h5>
                                        <div class="group-info">
                                            <div class="stars-rating">
                                                <div class="star-rating">
                                                    <span class="star-3"></span>
                                                </div>
                                                <div class="count-star">
                                                    (3)
                                                </div>
                                            </div>
                                            <div class="price">
                                                <del>
                                                    $65
                                                </del>
                                                <ins>
                                                    $45
                                                </ins>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-item style-1">
                                <div class="product-inner equal-element">
                                    <div class="product-top">
                                        <div class="flash">
													<span class="onnew">
														<span class="text">
															新品上市
														</span>
													</span>
                                        </div>
                                    </div>
                                    <div class="product-thumb">
                                        <div class="thumb-inner">
                                            <a href="#">
                                                <img src="images/product-item-3.jpg" alt="img">
                                            </a>
                                            <div class="thumb-group">
                                                <div class="yith-wcwl-add-to-wishlist">
                                                    <div class="yith-wcwl-add-button">
                                                        <a href="#">添加到心愿单</a>
                                                    </div>
                                                </div>
                                                <a href="#" class="button quick-wiew-button">查看详情</a>
                                                <div class="loop-form-add-to-cart">
                                                    <button class="single_add_to_cart_button button">添加到购物车
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-info">
                                        <h5 class="product-name product_title">
                                            <a href="#">箭头</a>
                                        </h5>
                                        <div class="group-info">
                                            <div class="stars-rating">
                                                <div class="star-rating">
                                                    <span class="star-3"></span>
                                                </div>
                                                <div class="count-star">
                                                    (3)
                                                </div>
                                            </div>
                                            <div class="price">
                                                <del>
                                                    $65
                                                </del>
                                                <ins>
                                                    $45
                                                </ins>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-item style-1">
                                <div class="product-inner equal-element">
                                    <div class="product-top">
                                        <div class="flash">
													<span class="onnew">
														<span class="text">
															新品上市
														</span>
													</span>
                                        </div>
                                    </div>
                                    <div class="product-thumb">
                                        <div class="thumb-inner">
                                            <a href="#">
                                                <img src="images/product-item-4.jpg" alt="img">
                                            </a>
                                            <div class="thumb-group">
                                                <div class="yith-wcwl-add-to-wishlist">
                                                    <div class="yith-wcwl-add-button">
                                                        <a href="#">添加到心愿单</a>
                                                    </div>
                                                </div>
                                                <a href="#" class="button quick-wiew-button">查看详情</a>
                                                <div class="loop-form-add-to-cart">
                                                    <button class="single_add_to_cart_button button">添加到购物车
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-info">
                                        <h5 class="product-name product_title">
                                            <a href="#">燕窝蕨</a>
                                        </h5>
                                        <div class="group-info">
                                            <div class="stars-rating">
                                                <div class="star-rating">
                                                    <span class="star-3"></span>
                                                </div>
                                                <div class="count-star">
                                                    (3)
                                                </div>
                                            </div>
                                            <div class="price">
                                                <del>
                                                    $65
                                                </del>
                                                <ins>
                                                    $45
                                                </ins>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 引入页脚栏 -->
	<jsp:include page="footer.jsp"></jsp:include>
	
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.plugin-countdown.min.js"></script>
<script src="js/jquery-countdown.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/mobile-menu.js"></script>
<script src="js/chosen.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/jquery.elevateZoom.min.js"></script>
<script src="js/jquery.actual.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/owl.thumbs.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script src="js/frontend-plugin.js"></script>
<script src="layui/layui.js"></script>
</body>
<script type="text/javascript">
var layer;
var size;
layui.use('layer', function(){
  layer = layui.layer;
});
function sizeId(id){
	for(var i=1;i<=6;i++){
		var div = document.getElementById('size'+i);
		div.className = '';
	}
	if(id==1) {size="一岁龄";}
	else if (id==2) {size="二岁龄";}
	else if (id==3) {size="三岁龄";}
	else if (id==4) {size="四岁龄";}
	else if (id==5) {size="五岁龄";}
	else if (id==6) {size="六岁龄";}
	var div = document.getElementById('size'+id);
	div.className = 'active';
}
//添加购物车功能
function addProCate(){
   var vip='${sessionScope.vipInfo}';
   if(vip==null || vip=='' ||vip==undefined){
     layer.msg("请先登录！");
     window.location.href="login.jsp";
     return false;
   }
   if(size==null || size=='' ||size==undefined){
	     layer.msg("请选择规格！");
	     return false;
	   }
   var pdtImg=$("#img_zoom").attr("src");//商品图片
   var pdtName=$("#pdtName").html();//商品名称
   var unit=$("#unit").html();//商品现价
   var number=$("#number").val();//商品数量
   var pdtUrl='${pageContext.request.requestURL}'+"?"+'${pageContext.request.queryString}';
  
   $.post("http://localhost:8080/Greenleaf/pdtDetail/addCart", 
  {"pdtId":'${param.pdtId}',"pdtName":pdtName,"pdtImg":pdtImg,"unit":unit,
  "number":number,"pdtUrl":pdtUrl,"size" : size},
  function(res){
    if(res){
      layer.msg("添加购物车成功！");
    }else{
       layer.msg("添加购物车失败,请稍后重试！");
    }
  },"json");

}
</script>

</html>